<template>
    <div>
        <Tables :data="list" :cols="cols" :pageNum="this.pagenum" :pageSize="this.pagesize" :total="this.total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
            <template v-slot:action='{row}' >
                <el-button type="primary" size="mini" icon="el-icon-edit"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete"></el-button>
                <el-button type="warning" size="mini" icon="el-icon-setting"></el-button>
            </template>
            <template v-slot:state='{row}' >
                <el-switch v-model="row.mg_state" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </template>
        </Tables>
    </div>
</template>

<script>
import Tables from "../../components/table.vue";
import { getUserlist } from "../../api/user.js";
export default {
  components: { Tables },
  data() {
    return {
      pagenum: 1,
      pagesize: 10,
      total:0,
      list: [],
      cols: [
        {
          label: "#",
          type: "index"
        },
        {
          label: "姓名",
          name: "username"
        },
        {
          label: "邮箱",
          name: "email"
        },
        {
          label: "电话",
          name: "mobile"
        },
        {
          label: "角色",
          name: "role_name"
        },
        {
          label: "状态",
          slot: "state"
        },
        {
          label: "操作",
          slot: "action",
          align: "center",
          width: 270
        }
      ]
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    async getUser() {
      let res = await getUserlist({
        pagenum: this.pagenum,
        pagesize: this.pagesize
      });
      console.log(res);
      this.list = res.data.data.users;
      this.total=res.data.data.total;
    },
    handleSizeChange(val){
        this.pagesize=val;
        this.getUser();
    },
    handleCurrentChange(val){
        this.pagenum=val;
        this.getUser();
    }
  }
};
</script>

<style lang="sass" scoped>

</style>